<template>
  <div class="table-main-box">
    <el-table
      :data="tableData"
      row-key="procode"
      border
      style="width: 100%"
      height="100%"
      :row-style="tableStyle"
      :header-row-style="headerStyle"
      highlight-current-row
      @row-click="clickProject"
    >
      <el-table-column align="center" prop="procode" label="编号" width="90" />
      <el-table-column
        align="center"
        prop="proshortname"
        label="简称"
        width="180"
      />
      <el-table-column
        align="center"
        prop="proname"
        label="全称"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        prop="stageName"
        label="阶段"
        width="100"
      />
      <el-table-column align="center" prop="procity" label="城市" width="200" />
      <el-table-column align="center" width="80">
        <template slot="header" slot-scope="scope">费用</template>
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="handCost(scope.row)"
            >费用</el-button
          >
        </template>
      </el-table-column>
      <el-table-column align="center" width="80">
        <template slot="header" slot-scope="scope">编辑</template>
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="handUpdate(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" width="105">
        <template slot="header" slot-scope="scope">回款信息</template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            @click="handCollection(scope.row)"
            >回款信息</el-button
          >
        </template>
      </el-table-column> -->
      <el-table-column align="center" width="80">
        <template slot="header" slot-scope="scope">附件</template>
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="handAnnex(scope.row)"
            >附件</el-button
          >
        </template>
      </el-table-column>
      <el-table-column align="center" width="90">
        <template slot="header" slot-scope="scope">里程碑</template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            @click="handMilestones(scope.row)"
            >里程碑</el-button
          >
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" width="90">
          <template slot="header" slot-scope="scope">删除</template>
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="success"
              @click="deleteItem(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column> -->
    </el-table>
  </div>
</template>

<script>
import { getStageProjectListApi } from '@/api/index'
import Search from '@/components/Search.vue'
export default {
  props: {
    tableData: {
      type: Array,
      default: null
    },
    openInfoDrawer: {
      type: Function,
      default: null
    },
    openCost: {
      type: Function,
      default: null
    },
    openUpdate: {
      type: Function,
      default: null
    },
    openAnnexAndMilestoner: {
      type: Function,
      default: null
    },
    openAnnex: {
      type: Function,
      default: null
    },
    openMilestoner: {
      type: Function,
      default: null
    },
    openCollection: {
      type: Function,
      default: null
    }
  },
  components: {
    Search
  },
  data () {
    return {
      tableStyle: {
        background: 'none',
        width: '150px'
      },
      headerStyle: {
        color: 'black',
        fontSize: '16px'
      },
      openInfo: true
    }
  },
  mounted () {},
  methods: {
    clickProject (row, column, event) {
      if (!this.openInfo) return
      this.openInfoDrawer(row)
    },

    // 费用按钮
    handCost (row) {
      this.openInfo = false
      this.openCost(row)
      this.setOpenInfo()
    },

    // 编辑按钮
    handUpdate (row) {
      this.openInfo = false
      this.openUpdate(row)
      this.setOpenInfo()
    },

    // 回款信息按钮
    handCollection (row) {
      this.openInfo = false
      this.openCollection(row)
      this.setOpenInfo()
    },

    // 附件与里程碑按钮
    handAnnexAndMilestone (row) {
      this.openInfo = false
      this.openAnnexAndMilestoner(row)
      this.setOpenInfo()
    },

    // 附件按钮
    handAnnex (row) {
      this.openInfo = false
      this.openAnnex(row)
      this.setOpenInfo()
    },

    // 里程碑按钮
    handMilestones (row) {
      this.openInfo = false
      this.openMilestoner(row)
      this.setOpenInfo()
    },

    // 删除
    deleteItem (row) {

    },

    setOpenInfo () {
      setTimeout(() => {
        this.openInfo = true
      }, 1000)
    }
  }
}
</script>

<style lang="scss" >
.table-main-box {
  /* border: 1px solid red; */
  height: 75vh;
}
.el-table {
  /* border: 1px solid red; */

  /* background: #f5f6fa; */
}
.has-gutter > tr > :last-child {
  /* background: red; */
}
.el-table__row:hover {
  cursor: pointer;
}
.el-table__body {
  margin-right: 0 !important;
}
.el-table__body-wrapper {
  overflow-y: hidden;
  &::-webkit-scrollbar {
    // 整个滚动条
    width: 0; // 纵向滚动条的宽度
    background: rgb(213 215 220 / 30%);
    border: none;
  }
  &::-webkit-scrollbar-track {
    // 滚动条轨道
    border: none;
  }
}
.el-table th.gutter {
  display: none;
  width: 0;
}
.el-table colgroup col[name="gutter"] {
  display: none;
  width: 0;
}
.el-table__body {
  width: 100% !important;
}
.el-table__body-wrapper::-webkit-scrollbar {
  display: none;
  width: 4px;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
  background: fade(rgb(78 182 214), 60%);
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
  opacity: 0.2;
}
.el-table__body-wrapper::-webkit-scrollbar-track {
  background: fade(rgb(78 182 214), 30%);
  border-radius: 0;
  box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
}
.el-table__body tr.current-row > td {
  background-color: #d0d3d0 !important;
}
</style>